<template>
  <div>
    <h2>{{msg}}</h2>
    <span @click="checkedSpan" v-for="(item,index) in props.list" :key="item">{{item}}{{props.list.length-1==index?"":"/"}}</span>
  </div>
</template>

<script lang='ts' setup>
//通过defineProps这个api我们可以约束父组件传递过来参数
const props = defineProps<{msg:string,list:Array<string>}>()
//约束了两个自定义事件名字
const $emit = defineEmits<{
    (e:"changeSpan",val:string):void,
    (e:"changeTitle",val:string):void,
}>()

const checkedSpan = ()=>{
    $emit("changeSpan","角色管理")
}


</script>

<style lang='scss' scoped>
</style>